<!--
	蓝牙设备
-->
<template>
    <view class="item-container" @click="toConfigPage(deviceData)">
        <view class="flex space-between align-center">
            <view>
                <view class="flex align-center">
                    <text class="item-id">设备{{ index + 1 }}({{ deviceData.mid }})</text>
                    <text class="read-state" v-if="type != 'set'">{{ deviceData.readState | readStateFilter }}</text>
                </view>
                <text class="item-time">本次测温时间: {{ deviceData.nowtempTime }}</text>
            </view>
            <!-- 当前温度 -->
            <text class="item-value" :class="{'error-value': deviceData.excessiveValue}">{{ deviceData.nowTemplate }}℃</text>
        </view>
        <!-- 设备状态 -->
        <view class="item-state flex space-between align-center">
            <view class="item-state_wrap">
                <text class="title">电量:</text>
                <power-icon style="margin-left: 5px" :showText="true" :value="deviceData.batteryVal"></power-icon>
            </view>
            <!-- 分割线 -->
            <!-- <text class="icon iconfont">&#xe686;</text> -->
            <view class="item-state_wrap">
                <text class="title">信号:</text>
                <rssi-icon :value="deviceData.RSSI"></rssi-icon>
            </view>
            <!-- 分割线 -->
            <!-- <text class="icon iconfont">&#xe686;</text> -->
            <view class="item-state_wrap">
                <text class="title">状态:</text>
                <text class="state-value" v-if="type == 'set'">待启动</text>
                <text class="state-value" v-else>{{ deviceData.configed | configState }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import rssiIcon from '../utils-ui/rssi-icon.vue'
import powerIcon from '../utils-ui/power-icon.vue'
export default {
    components: {
        'rssi-icon': rssiIcon, // 信号图标
        'power-icon': powerIcon // 电池图标
    },
    props: {
        // 设备数据
        deviceData: {
            type: Object,
            default: () => {
                return ''
            }
        },
        // 索引
        index: {
            type: Number,
            default: 0
        },
        // 类型（get：读取， set：配置）
        type: {
            type: String,
            default: 'get'
        }
    },
    filters: {
        // 读取状态过滤
        readStateFilter(value) {
            return !value ? '未读' : (value == '1' ? '已读' : '失败')
        },
        // 记录状态
        configState(value) {
            return value ? '记录中' : '已停止'
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        // 点击跳转到配置页
        toConfigPage(data) {
            this.$emit('handlerClick', data)
        }
    }
}
</script>

<style scoped>
@import url('../../common/global.css');
.item-container {
    padding: 10px 10px 0;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 10px;
}
.item-container:last-child {
    margin: 0;
}
/* APP里不支持border简写 */
.item-state {
    margin: 0 -20rpx;
    padding: 0 20rpx;
    border-top-width: 1px;
    border-style: solid;
    border-top-style: solid;
    border-color: #ebeef5;
    border-left: none;
    border-right: none;
    border-bottom: none;
    height: 25px;
}
.item-state_wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.title {
    color: #808283;
    margin-right: 5px;
    font-size: 12px;
}
.icon {
    color: #808283;
}
.item-id {
    font-size: 18px;
}
.item-time {
    display: block;
    font-size: 12px;
    color: #808283;
}
.item-id,
.item-time {
    line-height: 25px;
}
.item-value {
    font-size: 22px;
}
.state-value {
    font-size: 12px;
}
.read-state {
    font-size: 12px;
    margin-left: 15px;
}
.error-value {
    color: #f00;
}
</style>
